<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色列表</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button type="primary" size="mini" plain >添加角色</el-button>
        <el-button type="primary" size="mini" plain @click="showTreeDialog">角色授权</el-button>
        <!-- 角色授权对话框 -->
        <el-dialog title="角色授权" :visible.sync="dialogTreeVisible">
            <el-tree
                    :data="functions"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    :props="defaultProps"
                    @check="checkFunction">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogTreeVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <!--    角色表格-->
        <el-table
        ref="roleTable"
        :data="roles"
        style="width: 100%"
        highlight-current-row
        @current-change="selectRole">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号">
            <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.id }}</span>
            </template>
        </el-table-column>
            <el-table-column
                    label="名称">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="描述">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.description }}</span>
                </template>
            </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="current"
                @current-change="loadRoles">
        </el-pagination>
    </div>
    <script>
        new Vue({
           el:"#app",
           data(){
               return {
                   roles:[], // 角色列表
                   total:0,
                   current:0,
                   pageSize:10,
                   currentRole:null,  //当前选择的角色
                   functions:[], //权限列表
                   dialogTreeVisible:false,//是否显示树对话框
                   defaultProps: { //配置子节点和节点的显示属性
                       children: 'subFunctions',
                       label: 'name'
                   }
               }
           } ,
            methods:{
               //分页查询角色
               loadRoles(current){
                   axios.get("/roles/page?current=" + current)
                    .then(res =>{
                       this.roles = res.data.data;
                       this.total = res.data.total;
                       this.current = res.data.current;
                    });
               },
                //加载所有的权限
                loadFunctions(){
                    axios.get("/functions")
                    .then(res => {
                        this.functions = res.data;
                    })
                },
                //显示角色授权的对话框
                showTreeDialog(){
                   if(this.currentRole){
                       this.dialogTreeVisible = true;
                       //加载角色对应权限
                       axios.get("/functions/role/"+this.currentRole.id)
                        .then(res => {
                           //选中角色的权限
                           this.$refs.tree.setCheckedNodes(res.data);
                        });
                   }else{
                       this.$message("你必须选择一个角色!");
                   }
                },
                handleEdit(index, row) {
                    console.log(index, row);
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                //选择角色
                selectRole(row){
                   this.currentRole = row;
                   //全部取消
                   this.$refs.roleTable.clearSelection();
                   //选中当前行
                   this.$refs.roleTable.toggleRowSelection(this.currentRole);
                },
                //勾选权限
                checkFunction(fun,state){
                   console.log(fun.name);
                   if(state.checkedNodes.includes(fun)){
                       console.log("勾选");
                       axios.post("/role-function",{roleId:this.currentRole.id,funId:fun.id})
                       .then(res => {
                          if(res.data === "ok"){
                              this.$message("添加权限成功")
                          }
                       });
                   }else{
                       console.log("取消勾选");
                       axios.delete("/role-function/"+this.currentRole.id+"/"+fun.id)
                        .then(res => {
                           if(res.data === "ok"){
                               this.$message("删除权限成功");
                           }
                        });
                   }
                }
            },
            mounted(){
               this.loadRoles(1);
               this.loadFunctions();
            }
        });
    </script>
</body>
</html>